<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>

<s:head/>
<s:actionerror/>
<s:set var="contextPath">${pageContext.request.contextPath}</s:set>

<s:url id="saveUrl" value="UpdateAccount"/>

<script type="text/javascript" src="js/jquery.form-2.92.js"></script>
 
<script type="text/javascript">
	//jquery ajax form plugin
	$('#account${id}Form').ready(function(){
		var options = { 
		    	target: '#account${id}' // target element to be updated with server response 
			}; 
		// bind form with ajax
		$('#account${id}Form').ajaxForm(options);
		
		$('#account${id}FormCancel').click(function(){
			$('#account${id}').load('widgets/DisplayAccount?id=${id}');
		});
	})
</script>
 
<s:form id="account%{id}Form" theme="simple" action="%{#saveUrl}">
	<s:hidden name="id" value="%{id}"/>
	<s:hidden name="edit" value="%{edit}"/>
	
	<s:if test="edit == 1">
		<s:textfield theme="css_xhtml"  labelposition="left" key="userId"  id="newUserId%{id}"  name="newUserId" value="%{newUserId == -1 ? '' : newUserId}" maxlength="12"/>
		<s:textfield theme="css_xhtml" labelposition="left" key="apiKey" id="newApiKey%{id}"  name="newApiKey" value="%{newApiKey}" maxlength="64"/>
		<br/>
		<s:submit cssClass="ajax_button" key="save"/>
		<input id="account${id}FormCancel" type="button" class="ajax_button" value='<s:text name="cancel"/>'/>
	</s:if>
	<s:else>
		<s:if test="reload == 1">
			<script>
				location.reload(true); 
			</script>
		</s:if>
		<s:elseif test="delete == 1">
			<script type="text/javascript">
				$("#panel${id}").remove();
			</script>		
		</s:elseif>
		<s:elseif test="id == -1">
			<script type="text/javascript">
				$('#add_account_button').click(function(){
					$('#account-1').load('widgets/DisplayAccount?edit=1');
				});
			</script>
			<img class="ajax_button" id="add_account_button" src="${contextPath}/img/small_add_16.png" alt='<s:text name="add.account"/>'/>
		</s:elseif>
		<s:else>
			<span class="${account.availabilityStatus}" title="<s:text name='ACCOUNT_%{account.availabilityStatus}'/>">
				${account.userId} - ${account.maskedApiKey} 
			</span>
			<script type="text/javascript">
				$('#edit_account${id}_button').click(function(){
					$('#account${id}Form > [name="edit"]').val(1);
					$('#account${id}').load('widgets/DisplayAccount?id=${id}&edit=1');
				});
				$('#delete_account${id}_button').click(function(){
					if(confirm("<s:text name='delete.confirmation.question'/>")){
						$('#account${id}').load('widgets/DeleteAccount?id=${id}');
					}
				});
				$('#refresh_account${id}_button').click(function(){
					$('#account${id}').load('widgets/RefreshAccount?id=${id}');
				});
			</script>
			<img class="ajax_button" id="edit_account${id}_button" src="${contextPath}/img/small_settings_16.png" alt='<s:text name="edit"/>'/>
			<img class="ajax_button" id="delete_account${id}_button" src="${contextPath}/img/small_cancel_16.png" alt='<s:text name="delete"/>'/>
			<img class="ajax_button" id="refresh_account${id}_button" src="${contextPath}/img/small_refresh_16.png" alt='<s:text name="refresh"/>'/>
		</s:else>
	</s:else>
</s:form>

<s:if test="(id != -1) && (account != null) && (edit != 1)">
	<s:iterator value="account.getCharacters()" var="current">
		<script type="text/javascript">
			$('#character${current.id}').ready(function(){
				$('#character${current.id}').load('widgets/DisplayCharacter?id=${current.id}');
			});
		</script>
		<div id="character${current.id}"></div>
	</s:iterator>
</s:if>
